<template>
  <div class="flex flex-wrap items-center">
    <el-dropdown>
      <el-button type="primary">
        <span style="font-size: 16px">{{ kinds[index] }}</span>
        <el-icon class="el-icon--right">
          <arrow-down/>
        </el-icon>
      </el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item v-for="(x,i) in kinds" :key="i" @click="index=i">{{ x }}</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup>
import {ArrowDown} from '@element-plus/icons-vue'
import {inject, defineModel} from "vue";

const kinds = defineModel()
const index = inject('sk_index')
</script>
<style scoped>
</style>
